<template>
  <div class="outPageBox">
    <template v-if="!isLoading">
      <UserIntegral
        :integral="scoreDetail"
        @logoPhone="logoPhone"
        :isLoginPhone="isLoginPhone"
      />
      <div class="outPageBox-list">
        <List-Item
          :vouchersList="redList"
          v-if="redList.length > 0"
          :isLoginPhone="isLoginPhone"
          @logoPhone="logoPhone"
        />
      </div>
      <global-dialog :show="show" @cancel="onCancel" @confirm="onConfirm" />
    </template>
    <template v-else>
      <div class="load">
        <van-loading size="24px" vertical
          >正在为您获取积分中，请稍后...</van-loading
        >
      </div>
    </template>
  </div>
</template>

<script>
// @ is an alias to /src
import { getYdUserScore, getRedpacketList } from "@/api/score";
import globalDialog from "@/components/global-dialog";
import userIntegral from "@/components/user-integral";
import list from "@/components/list";
export default {
  name: "home",
  components: {
    UserIntegral: userIntegral,
    "List-Item": list,
    "global-dialog": globalDialog,
  },
  data() {
    return {
      scoreDetail: { points: 200000 },
      tongDun: "",
      tfDun: null,
      redList: [
        {
          rpImgUrl: require("@/assets/list/list1.png"),
          name: "安耐晒防晒小金瓶",
          score: 25000,
        },
        {
          rpImgUrl: require("@/assets/list/list2.png"),
          name: "苹果airpodspro",
          score: 400000,
        },
        {
          rpImgUrl: require("@/assets/list/list3.png"),
          name: "NARS定妆粉饼",
          score: 50000,
        },
        {
          rpImgUrl: require("@/assets/list/list4.png"),
          name: "罗技游戏鼠标",
          score: 25000,
        },
        {
          rpImgUrl: require("@/assets/list/list5.png"),
          name: "科颜氏白泥清洁面膜",
          score: 50000,
        },
        {
          rpImgUrl: require("@/assets/list/list6.png"),
          name: "兰蔑小黑瓶",
          score: 100000,
        },
      ],
      show: false,
      isLoginPhone: false,
      isLoading: false,
    };
  },
  mounted() {
    // const urlParams = new URLSearchParams(window.location.search);
    // const token = urlParams.get("token");
    // if (token) {
    //   localStorage.setItem("token", token);
    //   const detail = localStorage.getItem("scoreDetail");
    //   if (detail) {
    //     this.scoreDetail = JSON.parse(detail);
    //     this.isLoginPhone = true;
    //   } else {
    //     this.show = true;
    //     this.isLoginPhone = false;
    //   }
    // }
    // this.getRedList();
    // this.getTongDun();
  },
  methods: {
    logoPhone() {
      this.show = true;
    },
    onCancel() {
      this.show = false;
    },
    onConfirm(val) {
      this.onCancel();
      this.isLoading = true;
      this.getScore(val);
    },
    getTongDun() {
      const _this = this;
      window._fmOpt = {
        partner: "changyou",
        appName: "changyou_web",
        token:
          "changyou" +
          "-" +
          new Date().getTime() +
          "-" +
          Math.random().toString(16).substr(2),
        fmb: true,
        success: function (data) {
          // 在成功完成采集后，success回调中可以获取到blackbox，在获取到blackbox后传输过程中请进行url编码
          _this.tongDun = data;
          _this.$nextTick(() => {
            _this.getLocalData().then((res) => {
              _this.scoreDetail = { ...res };
              _this.$nextTick(() => {
                _this.getScore(res.phone);
              });
            });
          });
        },
        fpHost: "https://fp.tongdun.net",
      };
      var cimg = new Image(1, 1);
      cimg.onload = function () {
        _fmOpt.imgLoaded = true;
      };
      cimg.src =
        "https://fp.tongdun.net/fp/clear.png?partnerCode=changyou&appName=changyou_web&tokenId=" +
        _fmOpt.token;
      var fm = document.createElement("script");
      fm.type = "text/javascript";
      fm.async = true;
      fm.src =
        ("https:" == document.location.protocol ? "https://" : "http://") +
        "static.tongdun.net/v3/fm.js?ver=0.1&t=" +
        (new Date().getTime() / 3600000).toFixed(0);
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(fm, s);
    },
    getLocalData() {
      const local = localStorage.getItem("scoreDetail");
      const result = JSON.parse(local);
      return new Promise((resolve, reject) => {
        if (local) {
          resolve(result);
        } else {
          reject();
        }
      });
    },
    async getScore(val) {
      const res = await getYdUserScore({
        fingerprint: this.tongDun,
        exPhone: val,
      });
      this.isLoading = false;
      if (res.data?.status === 2) {
        window.location.href = res.data.url;
      } else {
        const { points } = res.data;
        this.scoreDetail = { ...res.data, phone: val };
        this.isLoginPhone = true;
        localStorage.setItem(
          "scoreDetail",
          JSON.stringify({
            points: points,
            phone: val,
            fingerprint: this.tongDun,
          })
        );
      }
    },
    async getRedList() {
      const res = await getRedpacketList();
      this.redList = [].concat(res.rows);
    },
  },
};
</script>
<style lang="less" scoped>
.outPageBox {
  &-list {
    width: 100%;
    position: absolute;
    top: 126px;
    bottom: 0;
    padding: 0 8px;
    box-sizing: border-box;
  }
}
.load {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}
</style>
